<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <Input v-model="form.userName" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="verificationCode">
                            <Button @click="sendYzm" type="primary"  style="width: 90px;float: right" >{{yzmInner}}</Button>
                            <Input type="text" v-model="form.verificationCode" style="width: 150px;" placeholder="请输入验证码">
                                <span slot="prepend">
                                    <Icon :size="14" type="email"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button @click="handleSubmit" type="primary" long>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import $http from '../utils/axiosWrap'

export default {
    data () {
        return {
            Message: '',
            form: {
                userName: '',
                verificationCode: ''
            },
            yzmInner: '获取验证码',
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                verificationCode: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ]
            },
            sendTrue:true,
            getVerificationCode:''
        }
    },
//    created(){
//        var _this = this
//        _this.$router.push({
//            path: 'home'
//        })
//    },
    methods: {
        handleSubmit () {
            var _this = this
                _this.$refs.loginForm.validate((valid) => {
                    if (valid) {
//                        if(_this.form.verificationCode == _this.getVerificationCode){
                            let params = new URLSearchParams()
                            params.append('username', _this.form.userName)
                            params.append('password', _this.form.verificationCode)
                            $http.post('/sysManagerUser/login', params).then(function (res) {
                                if (res.suc) {
                                    var storage=window.localStorage;
                                    storage.clear();
                                    Cookies.set('user', _this.form.userName)
                                    Cookies.set('userId', res.result.sysUserId)
                                    if (res.result.sysUserAuthorityType == '0') {
                                        Cookies.set('access', 0);
                                    } else if(res.result.sysUserAuthorityType == '1'){
                                        Cookies.set('access', 1);
                                    }else if(res.result.sysUserAuthorityType == '2'){
                                        Cookies.set('access', 2);
                                    }else{
                                        Cookies.set('access', 3);
                                    }
                                    Cookies.set('address', res.result.address)
                                    Cookies.set('sysUserAuthorityType', res.result.sysUserAuthorityType)
                                    Cookies.set('loginTime', res.result.loginTime)
                                    _this.$router.push({
                                        path: 'home'
                                    })
                                }else{
                                    bus.login = false
                                    _this.$Message.error(res.msg)
                                }
                            })
//                        }else{
//                            _this.$Message.error('验证码输入有误!')
//                        }
                    }
                })
        },
        sendYzm () {
            let _this = this
            if(_this.sendTrue){
                _this.sendTrue = false
                let params = new URLSearchParams()
                params.append('sysEnglishName', _this.form.userName)
                $http.post('/sysManagerUser/sendVerificationCode', params).then(function (res) {
                    console.log(res)
                    if(res.suc){
                        _this.sendTimeout()
                        _this.getVerificationCode = res.result.verificationCode
                        _this.$Message.info('验证码发送成功!')

                    }else{
                        _this.$Message.error(res.msg)
                        _this.sendTrue = true
                    }
                })
            }else{
                _this.$Message.info('请稍后再试!')
            }
        },
        sendTimeout(){
            let _this = this
            let time = 60
            let setTime = setInterval(function () {
                if(time > 0){
                    time--
                    _this.yzmInner = '(' + time + ')'
                }
                if(time == 0){
                    clearInterval(setTime)
                    _this.yzmInner = '重新发送'
                    _this.sendTrue = true
                }
            },1000)
        }
    }
};
</script>

<style>

</style>
